<template>
    <div class="commentManage">
        <breadcrumb :breadcrumb="['评论管理']"></breadcrumb>
        <div class="search-header">
            <el-form inline ref="searchRef" :model="searchData">
                <el-form-item>
                    <el-input v-model="searchData.content" size="small" clearable placeholder="标题"
                        @input="pageChange(1)">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="pageChange(1)">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="list" class="tableList el-table--scrollable-y"
            height="calc(100vh - 20px - 45px - 61px - 10px - 10px - 72px)" style="width: 100%;">
            <el-table-column prop="orderNumber" label="序号" align="center"></el-table-column>
            <el-table-column prop="content" label="内容" align="center"></el-table-column>
            <el-table-column prop="created_time" label="创建时间" align="center">
                <template slot-scope='scope'>
                    <span>{{scope.row.created_time | dateTime}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updated_time" label="更新时间" align="center">
                <template slot-scope='scope'>
                    <span>{{scope.row.updated_time | dateTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="addOrUpdate('update', scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pageContent :total="dataTotal" :page="1" :pageSize="10" @pageChange="(val, limit) => {pageChange(val, limit)}">
        </pageContent>
    </div>
</template>

<script>
    import pageContent from '@/components/pageContent/pageContent'
    import breadcrumb from '@/components/breadcrumb/breadcrumb'
    import { commentApi } from '@/api'
    import { numSort, timeConversion } from '@/utils'
    export default {
        name: 'commentManage',
        data() {
            return {
                searchData: {
                    content: '',
                    currentPage: 1,
                    pageSize: 10,
                },
                dataTotal: 0,
                list: [],
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            // 获取列表
            async getList() {
                let params = Object.assign({}, this.searchData)
                const { err, data } = await commentApi.getPage(params)
                if (err) {
                    return false
                }
                if (data.list.length === 0 && params.currentPage !== 1) {
                    // 删除后判断当前页面是否无数据 如果有数据则正常处理数据，如不正常数据为空时。则重新获取有数据的页面条件
                    // 删除后当前页面无数据时，则重新计算有数据的页面重新获取数据
                    let current = Math.ceil(data.totalCount / params.pageSize)
                    this.pageChange(current)
                } else {
                    data.list.forEach((item, index) => {
                        item['orderNumber'] = numSort(index, params.currentPage, params.pageSize)
                    })
                    this.list = data.list
                    this.dataTotal = data.totalCount
                }

            },
            // 删除
            del(item) {
                this.$confirm('确定删除当前数据吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(async () => {
                        const { err, data } = await adminApi.delData(item)
                        if (err) {
                            return false
                        }
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                        })
                        this.getList()
                    })
                    .catch(() => { })
            },
            // 分页
            pageChange(val, limit) {
                if (limit) {
                    this.searchData.pageSize = limit
                }
                this.searchData.currentPage = val
                this.getList()
            },
        },
        components: {
            breadcrumb,
            pageContent,
        },
    }
</script>

<style scoped lang="less">
</style>